<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <script href="/js/jquery.js"></script>
    <script href="/js/echarts.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="data" style="width: 100% ; height: 50%"></div>
<script type="text/javascript">
    var div = document.getElementById("data");
    var doc = echarts.init(div);
    var option;
    var obj;
    $.ajax({
        type: "get",
        async: true,  // 注意：默认情况下，$.ajax 就是异步的，所以这一行可以省略
        url: "/genderCount/ads_stu_info",
        dataType: "json",
        success: function (data) {
            // 假设 data.genders 是一个包含性别的数组，data.total_counts 是一个对应的人数数组
            var genders = data.genders;
            var total_counts = data.total_counts;

            // 转换数据为 ECharts 饼图所需的格式
            var pieData = genders.map(function(gender, index) {
                return {
                    value: total_counts[index],  // 人数
                    name: gender                 // 性别
                };
            });

            var option = {
                title: {
                    text: '男女总人数',
                    left: 'center'
                },
                // ...（其他配置保持不变）
                series: [
                    {
                        name: '人数',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: pieData, // 使用转换后的数据
                        // ...（其他配置保持不变）
                        label: {
                            show: true,
                            position: 'outside', // 标签显示在饼图外部
                            formatter: '{b}: {c}', // 格式化标签内容，{b} 是名称，{c} 是值
                            radius: ['30%', '70%'], // 标签距离中心的距离范围，第一个值是内半径，第二个值是外半径
                            // 还可以根据需要调整标签的其他样式，比如文字大小、颜色等
                        }, labelLine: {
                            show: true, // 显示连接标签和扇区的线
                            length: 10, // 线的长度
                            length2: 20 // 线的第二段长度，用于在饼图外部时创建一个小间隔
                        },
                    }
                ]
            };

            // 假设 doc 是你的 echarts 实例
            // 确保 doc 已经被正确初始化为 ECharts 实例
            doc.setOption(option);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            // 处理错误
            console.error("Ajax 请求失败: " + textStatus, errorThrown);
        }
    });
    // $.ajax({
    //     type: "get",
    //     async: true,
    //     url: "/genderCount/ads_stu_info",
    //     dataType: "json",
    //     success: function (data) {
    //         obj = eval(data);//解析json数据
    //         option = {
    //
    //             title: {
    //                 text: '男女总人数',
    //                 left: 'center'
    //             },
    //             tooltip:{
    //                 trigger:'axis',
    //             },
    //             legend:{
    //                 orient:'vertical',
    //                 left: 'left'
    //             },
    //
    //             xAxis: {
    //                 name:"性别",
    //                 type: 'category',
    //                 data: obj.genders,
    //
    //             },
    //
    //             yAxis: {
    //                 type: 'value',
    //
    //             },
    //             series: [
    //                 {
    //                     name:'人数',
    //                     data: obj.total_counts,
    //                     type: 'bar'
    //                 }
    //             ]
    //         };
    //         doc.setOption(option);
    //     }
    // });
</script>
</body>
</html>
